<div class="da-list-wrap">
  <div class="da-content-banner">
    <d-breadcrumb>
      <d-breadcrumb-item><a routerLink="/">首页</a></d-breadcrumb-item>
      <d-breadcrumb-item>个人中心</d-breadcrumb-item>
    </d-breadcrumb>
  </div>
  <div class="da-content-wrapper">
    <div class="userData">
      <div class="card">
        <div class="card-header">
          <div class="user-avatar">
            <d-avatar [imgSrc]="headerURL" [name]="employData.name" [width]="80" [height]="80"></d-avatar>
            <div class="user-name">
              <span>{{employData.name}}</span>
            </div>
          </div>
          <div class="userinfo">
            <div class="user-info-item">
              <div class="user-info-item-left">
                <span>编码：</span>
                <span>{{employData.employeeCode}}</span>
              </div>
              <div class="user-info-item-right">
                <span>账号：</span>
                <span>{{employData.accountNumber}}</span>
              </div>
            </div>
            <div class="user-info-item">
              <div class="user-info-item-left">
                <span>工号：</span>
                <span>{{employData.jobNumber}}</span>
              </div>
              <div class="user-info-item-right">
                <span>部门：</span>
                <span>{{employData.departName}}</span>
              </div>
            </div>
            <div class="user-info-item">
              <div class="user-info-item-mid">
                <span>角色：</span>
                <div class="tages">
                  <d-tags [tags]="employData.userRoles"></d-tags>
                </div>
              </div>
            </div>
            <div class="user-info-item">
              <div class="user-info-item-mid">
                <span>手机：</span>
                <span>{{employData.ownerPhoneNumber}}</span>
              </div>
            </div>
            <div class="user-info-item">
              <div class="user-info-item-mid">
                <span>邮箱：</span>
                <span>{{employData.ownerEmail}}</span>
              </div>
            </div>
            <div class="user-info-item">
              <div class="user-info-item-mid">
                <span>家庭住址：</span>
                <span>{{employData.address}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="userNotice">
      <div class="card">
        <d-tabs [size]="'lg'" type="tabs" [(activeTab)]="tabActiveId" (activeTabChange)="activeTabChange($event)">
          <d-tab id="未读消息" [title]="tabActiveTitle[0]">
            <div class="tab-wrapper">
              <div class="tab-title">
                <d-button bsSize="sm" (btnClick)="allRead()">
                  全部已读
                </d-button>
              </div>
              <div class="tab-content">
                <div class="message-item" *ngFor="let item of noReadMessage">
                  <a [routerLink]="generateLink(splitMessageContent(item.content).type)"
                    [queryParams]="{ orderNumber: splitMessageContent(item.content).orderNumber }"
                    class="message-item-title" >
                    {{ splitMessageContent(item.content).type }}
                  </a>
                  <div class="message-item-content">
                    <span>{{ splitMessageContent(item.content).before }}</span>
                    单号:<a class="devui-link"
                      (click)="clickCode(splitMessageContent(item.content).orderNumber,splitMessageContent(item.content).type,item.messageId)">{{ splitMessageContent(item.content).orderNumber }}</a>
                    <span>{{ splitMessageContent(item.content).after }}</span>
                  </div>
                  <div class="message-item-content" >
                    {{item.createTime}}
                  </div>
                  <div class="message-item-content" [ngClass]="{'disabled': item.isRead}">
                    <a class="devui-link" (click)="readMessage(item.messageId, item)">
                      设为已读
                    </a>
                    <a class="devui-link-danger" [ngClass]="{'disabled': item.isRead}">
                      删除
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div class="page-footer shadow-footer">
              <d-pagination [size]="'sm'" [canViewTotal]="true" [canChangePageSize]="true" [canJumpPage]="true"
                [maxItems]="5" [total]="this.pager.total" [pageSizeOptions]="this.pageSizeOptions"
                [(pageSize)]="pager.pageSize" [(pageIndex)]="pager.pageIndex"
                (pageIndexChange)="pageIndexChange($event)" (pageSizeChange)="pageSizeChange($event)">
              </d-pagination>
            </div>
          </d-tab>
          <d-tab id="全部消息" [title]="tabActiveTitle[1]">
            <div class="tab-wrapper">
              <div class="tab-title">
                <d-button bsSize="sm" [bsStyle]="'danger'" (btnClick)="allClean()">
                  清空
                </d-button>
              </div>
              <div class="tab-content">
                <div class="message-item" *ngFor="let item of allMessage" [ngClass]="{'read': item.status=='已读'}">
                  <a [routerLink]="generateLink(splitMessageContent(item.content).type)"
                    [queryParams]="{ orderNumber: splitMessageContent(item.content).orderNumber }"
                    class="message-item-title" >
                    {{ splitMessageContent(item.content).type }}
                  </a>
                  <div class="message-item-content">
                    <span>{{ splitMessageContent(item.content).before }}</span>
                    单号:<a class="devui-link"
                      (click)="clickCode(splitMessageContent(item.content).orderNumber,splitMessageContent(item.content).type,item.messageId)">{{ splitMessageContent(item.content).orderNumber }}</a>
                    <span>{{ splitMessageContent(item.content).after }}</span>
                  </div>
                  <div class="message-item-content">
                    {{item.createTime}}
                  </div>
                  <div class="message-item-content" [ngClass]="{'disabled': item.isRead}">
                    <a class="devui-link" *ngIf="item.status=='未读'" (click)="readMessage(item.messageId, item)">
                      设为已读
                    </a>
                    <a class="devui-link-danger" [ngClass]="{'disabled': item.isRead}">
                      删除
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div class="page-footer shadow-footer">
              <d-pagination [size]="'sm'" [canViewTotal]="true" [canChangePageSize]="true" [canJumpPage]="true"
                [maxItems]="5" [total]="this.pager.total" [pageSizeOptions]="this.pageSizeOptions"
                [(pageSize)]="pager.pageSize" [(pageIndex)]="pager.pageIndex"
                (pageIndexChange)="pageIndexChange($event)" (pageSizeChange)="pageSizeChange($event)">
              </d-pagination>
            </div>
          </d-tab>
          <d-tab id="待办事项" title="待办事项">
          </d-tab>
        </d-tabs>
      </div>
    </div>
  </div>
</div>
<d-toast [value]="msgs" [life]="2000" [styleClass]="'custom-class'" [style]="{ left: '50%',top:'10px' }"></d-toast>
